<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>子组件向父组件传递数据</title>
    <link rel="stylesheet" type="text/css" href="./style.css">
</head>
<body>
    <div id="app">
        <h2>子组件向父组件传数据一</h2>
        <custom-select btn-value="查询" :data-list="cityList" placeholder="请选择城市"></custom-select>
        <h2>子组件向父组件传数据二</h2>
        <custom-select btn-value="搜索" :data-list="dateList" placeholder="请选择日期"></custom-select>
    </div>
    <script src="../../2.1.8/vue.js"></script>
    <script>
        /*
           子组件向父组件传数据
           this.$emit('event',data);
               event : 自定义事件
               data : 传给自定义事件的数据

        */
        Vue.component('custom-select',{
            props : ['btnValue','dataList','placeholder'],
            data(){
                return {
                    show : false,
                    val : ''
                }
            },
            template : 
            `<section class="warp">
                <div class="searchIpt clearFix">
                    <div class="clearFix">
                        <input type="text" class="keyWord" :placeholder="placeholder" @click="show=!show" :value="val"/>
                        <input type="button" :value="btnValue">
                        <span></span>
                    </div>
                    <custom-list  
                    v-show="show" 
                    :data-list="dataList"
                    v-on:receive="receive"
                    ></custom-list>
                </div>
            </section>`,
            methods : {
                receive( item ){
                    this.val = item;
                    this.show = false;
                } 
            }
        });
        Vue.component('custom-list',{
            props : ['dataList'],
            template : 
                `<ul class="list">
                    <li v-for="(item,i) in dataList" @click="getListValue( item )">{{ item }}</li>
                </ul>`,
            methods : {
                getListValue(item){
                    this.$emit( 'receive', item );
                }
            },
        });

        let vm = new Vue({
            el : '#app',
            data : {
                cityList : ['北京','上海','杭州'],
                dateList : ['2017-03-25','2017-03-26','2017-03-27'],
            }
        });
    </script>
</body>
</html>